<script setup>
import { ref, onMounted } from 'vue'
import { getTaskList, getTaskListByQuery } from '../../../apis/task';

    const page = ref(1)
    const size = ref(5)
    const status = ref(6)
    const startTime = ref('开始时间')
    const endTime = ref('结束时间')
    const searchId = ref('')
    // 已完成任务列表
    const completeList = ref([])
    // 在途列任务列表是否为空
    const isEmpty = ref(false)
    const isLoading = ref(false)

    const startTimeChange = (val) => {
      startTime.value = val.detail.value
    }
    const endTimeChange = (val) => {
      endTime.value = val.detail.value
    }
    const isTriggered = ref(false)
    // 生命周期（获取数据）
    onMounted(() => {
      getCompleteList()
    })

    const queryTask = () => {
      completeList.value = []
      page.valueq = 1
      getCompleteList()
    }

   // 监听用户的下拉操作
    async function onScrollViewRefresh() {
      isTriggered.value = true
      page.value = 1;
      completeList.value = []
      getCompleteList()
    }

    // 上拉分页
    function onScrollToLower() {
      page.value++;
      // 获取下一页数据
      getCompleteList()
    }

  // 在途任务列表
  const getCompleteList = async () => {
      let req = {
        status: status.value,
        page: page.value,
        pageSize: size.value
      }
      if(startTime.value.length !== 0 && startTime.value !== '开始时间'){
        req.startTime = startTime.value
      }
      if(endTime.value.length !== 0 && endTime.value !== '结束时间'){
        req.endTime = endTime.value
      }
      if(searchId.value.length > 0){
        req.transportTaskId = searchId.value
      }
     getTaskListByQuery(req,res => {
      if(res.code === 200){
        if(res.data.items == null || res.data.counts === '0'){
          isEmpty.value = completeList.value.length === 0
          return
        }
        for(let i=0;i < res.data.items.length;i++){
          completeList.value.push(res.data.items[i])
        }

        isEmpty.value = completeList.value.length === 0
        isTriggered.value = false
      }else{
        showFailToast('获取任务列表失败')
      }
    })
  }
</script>

<template>
 <view class="task-search">
   <view class="search-bar">
     <text class="iconfont icon-search"></text>

     <input v-model="searchId" class="input" type="text" placeholder="输入任务编号" />
   </view>

   <view class="filter-bar">
     <picker class="picker" mode="date" @change="startTimeChange">{{startTime}}</picker>

     <text class="text">至</text>

     <picker class="picker" mode="date" @change="endTimeChange">{{endTime}}</picker>

     <button class="button" @click="queryTask">筛选</button>

   </view>

 </view>

 <scroll-view scroll-y refresher-enabled
   @refresherrefresh="onScrollViewRefresh"
   :refresher-triggered="isTriggered"
   @scrolltolower="onScrollToLower" class="scroll-view">
   <view class="scroll-view-wrapper">
     <view
       v-for="complete in completeList"
       :key="complete.id"
       class="task-card"
     >
       <navigator
         hover-class="none"
         :url="`/subpkg_task/detail/index?id=${complete.id}`"
       >
         <view class="header">
           <text class="no">任务编号: {{ complete.transportTaskId }}</text>

         </view>

         <view class="body">
           <view class="timeline">
             <view class="line">{{ complete.startAddress }}</view>

             <view class="line">{{ complete.endAddress }}</view>

           </view>

         </view>

       </navigator>

       <view class="footer flex">
         <view class="label">提货时间</view>

         <view class="time">{{ complete.created }}</view>

       </view>

     </view>

     <view v-if="isEmpty" class="task-blank">无完成货物</view>

   </view>

 </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';

  .task-search {
    padding: 30rpx;
    // margin-top: -1rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .search-bar {
      position: relative;

      .icon-search {
        position: absolute;
        top: 22rpx;
        left: 24rpx;
        color: $uni-secondary-color;
        font-size: $uni-font-size-small;
      }

      .input {
        height: 72rpx;
        background-color: #f4f4f4;
        border-radius: 72rpx;
        padding-left: 72rpx;
        font-size: $uni-font-size-small;
      }
    }

    .filter-bar {
      display: flex;
      margin-top: 30rpx;
      font-size: $uni-font-size-small;
      text-align: center;
      line-height: 64rpx;
      color: $uni-secondary-color;

      .picker {
        width: 230rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: $uni-bg-color;
      }

      .text {
        margin: 0 24rpx;
      }

      .button {
        width: 120rpx;
        height: 64rpx;
        padding: 0;
        margin-left: 40rpx;
        line-height: 64rpx;
        border-radius: 64rpx;
        font-size: $uni-font-size-small;
        color: #fff;
        background-color: $uni-primary;

        &[disabled] {
          background-color: #fadcd9;
        }
      }
    }
  }
</style>
